<template>
  <div class="container_equiList">
    <div class="container_top">
      <div class="title_name_con">
        {{ "设备面板" }}
      </div>
    </div>
    <div class="flex_con">
      <div class="right_con">
        <div class="right_image_con">
          <!-- <img :src="equipment_bg" alt="" /> -->
          <div class="left_right_con">
            <div class="left_side">
              <div class="circle_con"></div>
              <div class="circle_con"></div>
            </div>
          </div>
          <div class="equi_con">
            <div class="left_1">{{ device.deviceNo }}</div>
            <div class="left_2">
              <div class="left_img_con">
                <img class="img_one" :src="comPng" alt=""/>
                <div class="left_2_title">CONSOLE</div>
              </div>
              <div class="circle_border_con">
                <div class="circle_item_con">
                  <div class="circle_center_con"></div>
                </div>
              </div>
              <div class="left_img_con">
                <img class="img_two" :src="ethPng" alt=""/>
                <div class="left_2_title">ETH</div>
              </div>
              <div class="left_img_con">
                <img class="img_three" :src="usbPng" alt=""/>
                <div class="left_2_title">USB</div>
              </div>
            </div>
            <div class="left_3">
              <div class="three_left_con">
                <div class="three_left_left">
                  <div class="three_left_left_item">READY</div>
                  <div class="three_left_left_item">CLIENT</div>
                  <div class="three_left_left_item">POWER</div>
                </div>
                <div class="three_left_right">
                  <img class="three_one" :src="rcpPng" alt=""/>
                </div>
              </div>
              <div class="three_center_con">
                <div class="three_center_top">
                  <img class="three_center_img_top" :src="starPng" alt=""/>
                </div>
                <div class="three_center_bottom">
                  <img class="three_center_img_bottom" :src="simPng" alt=""/>
                  <div class="three_center_text_bottom">SIM</div>
                </div>
              </div>
              <div class="three_right_con">
                <img class="fourgPng_img" :src="fourgPng" alt=""/>
                <div class="three_center_text_bottom">4G</div>
              </div>
            </div>
            <div class="left_4">
              <div
                class="channel_con"
                v-for="(item, index) in channelNumFun()"
                :key="index"
              >
                <!-- tableData -->
                <div class="channel_bg_con">
                  <div
                    class="channel_img_con"
                    @click="selectChannelFun(index, 'left')"
                  >
                    <div
                      v-show="currentChannel !== index * 2"
                      class="img_shade_con"
                    ></div>
                  </div>
                  <div
                    class="channel_img_con"
                    v-if="channelNumFun() > 1"
                    @click="selectChannelFun(index, 'right')"
                  >
                    <div
                      v-show="currentChannel !== index * 2 + 1"
                      class="img_shade_con"
                    ></div>
                  </div>
                </div>
                <div class="channel_num_con">
                  <div>CH{{ item * 2 - 1 }}</div>
                  <div v-if="channelNumFun() > 1">CH{{ item * 2 }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="left_right_con">
            <div class="left_side">
              <div class="circle_con"></div>
              <div class="circle_con"></div>
            </div>
          </div>
        </div>
        <div class="right_main_con">
          <div class="main_right_content">
            <div class="item_main_right">
              <div class="main_item_left">设备名称</div>
              <div class="main_item_right">{{ device.deviceName || "--" }}</div>
            </div>
            <div class="item_main_right">
              <div class="main_item_left">设备编号</div>
              <div class="main_item_right">{{ device.deviceNo || "--" }}</div>
            </div>
            <div class="item_main_right">
              <div class="main_item_left">是否在线:</div>
              <div class="main_item_right">
                {{ isOnLine ? "在线" : "不在线" }}
              </div>
            </div>
            <div class="item_main_right">
              <div class="main_item_left">软件版本:</div>
              <div class="main_item_right">
                {{ dev_info.software_version || device.softwareVersion || "--" }}
              </div>
            </div>
            <div class="item_main_right">
              <div class="main_item_left">硬件版本:</div>
              <div class="main_item_right">
                {{ dev_info.hardware_version || device.hardwareVersion || "--" }}
              </div>
            </div>
            <div class="item_main_right">
              <div class="main_item_left">设备型号:</div>
              <div class="main_item_right">
                {{ dev_info.equipment_model || device.deviceModel || "--" }}
              </div>
            </div>
            <div class="item_main_right">
              <div class="main_item_left">端口数量:</div>
              <div class="main_item_right">{{ tableData.length ||  device.channelNum || "--" }}</div>
            </div>
          </div>
        </div>
        <div class="main_right_table">
          <div class="right_table_top">
            <div class="table_top_item table_top_title">
              端口{{ currentChannel + 1 }}
            </div>
            <div class="table_top_item">
              <div class="margin_right">
                <div class="ceshi_con">周期测试开启状态:</div>
                <el-switch
                  v-model="status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange"
                ></el-switch>
              </div>
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                :disabled="tableData.length < 1"
                @click="dispatchFun"
              >周期配置
              </el-button
              >
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                :disabled="tableData.length < 1"
                @click="alarmCycleFun"
              >报警阈值
              </el-button
              >
              <!--  :disabled="!isOnLine && (tableData.length < 1 || !ready)" -->
              <el-button
                size="small"
                type="text"
                icon="el-icon-position"
                :disabled="isToTest()"
                @click="goEquiRack"
              >点名测试
              </el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <dispatchDialog
      :dispatchVis="dispatchVis"
      :ediExpressionObj="ediExpressionObj"
    ></dispatchDialog>
    <!-- 设置阈值 -->
    <settingThreshold
      :cycleVis="cycleVis"
      :cycleObj="cycleObj"
      name="equiList"
    ></settingThreshold>
  </div>
</template>

<script>
import Paho from "paho-mqtt";
import equipment_bg from "@/assets/images/device/equipment_bg.png";
import comPng from "@/assets/images/device/comPng.png";
import ethPng from "@/assets/images/device/ethPng.png";
import usbPng from "@/assets/images/device/usbPng.png";
import rcpPng from "@/assets/images/device/rcpPng.png";
import starPng from "@/assets/images/device/starPng.png";
import simPng from "@/assets/images/device/simPng.png";
import fourgPng from "@/assets/images/device/fourgPng.png";
import connectPortPngItem from "@/assets/images/device/connectPortPngItem.png";

import dispatchDialog from "@/views/components/device/dispatchDialog";
import settingThreshold from "@/views/components/device/settingThreshold";

import {getDevice} from "@/api/base/device"
import { listByDevice } from "@/api/base/jobDispatch";
import {changeJobStatus} from "@/api/monitor/job";

export default {
  name: "devicePanel",
  components: {
    dispatchDialog,settingThreshold
  },
  data() {
    return {
      connectPortPngItem,
      fourgPng,
      simPng,
      starPng,
      rcpPng,
      comPng,
      ethPng,
      usbPng,
      equipment_bg,
      client: new Paho.Client(process.env.VUE_APP_MQTT_URL, "web" + Date.now()),
      // 设备id
      deviceId: null,
      // 设备信息
      device: {},
      isOnLine: false,
      //设备信息-在线获取
      dev_info: {}, //设备信息
      currentChannel: 0, //当前的通道号
      status: "0", //端口的状态
      deviceParams: {}, //参数信息
      dispatchVis: false, //调度配置的弹框
      tableData: [], //右拉框的通道 表格数据
      cycleVis: false, //报警阈值的弹框
      cycleObj: {
        //阈值的设备和通道
        deviceNo: null,
        channel: null,
      },
      ediExpressionObj: {}, //传给子组件的表达式的数据, 修改时候用
      topic: '',
    };
  },
  created() {
    this.deviceId = this.$route.query.deviceId ? parseInt(this.$route.query.deviceId) : null;
    this.getDeviceInfo();


    this.client.connect({
      onSuccess: this.onConnect,
      userName: process.env.VUE_APP_USERNAME,
      password: process.env.VUE_APP_PASSWORD,
    });
    this.client.onConnectedLost = this.onConnectedLost;
    this.client.onMessageArrived = this.onMessageArrived;
  },
  activated() {
    this.deviceId = this.$route.query?.deviceId;
  },
  mounted() {

  },
  beforeDestroy() {
    this.client.unsubscribe(this.topic);
  },
  methods: {
    getDeviceInfo() {
      getDevice(this.deviceId).then(response => {
        this.device = response.data;
        this.topic = `$FAMS/OTU/${this.device.deviceNo}/ctrl-down`;
        this.configDraFun("mounted");
      })
    },
    onConnect: function onConnect() {
      //连接成功
      this.client.subscribe(`$FAMS/OTU/+/ctrl-up`);
      setTimeout(() => {
        this.getDeviceInfoFromMqtt();
      }, 500)
    },
    onConnectedLost: function (responseObject) {
      this.$modal.msgWarning("连接断开");
    },
    onMessageArrived: function (message) {
      //返回消息
      let that = this;
      let dataMid = JSON.parse(message.payloadString);
      console.log("设备列表页面返回消息", dataMid);
      if (this.device.deviceNo === dataMid.from) {
        if (dataMid.cmd === "get_dev_info") {
          that.isOnLine = true;
          that.dev_info = dataMid.response.dev_info;
        }
      }
    },
    getDeviceInfoFromMqtt() {
      //获取设备信息
      if (this.client.isConnected()) {
        //设备定义
        let param = {
          cmd: "get_dev_info",
          from: "Manager",
          moduleId: " ",
          to: this.device.deviceNo,
          uniId: 1,
        };
        this.client.publish(this.topic, JSON.stringify(param)); //发布
      } else {
        this.$modal.msgWarning("服务连接断开，请稍后重试");
      }
    },
    channelNumFun(e) {
      if (this.device.channelNum == 1) {
        return 1;
      }
      if (this.device.channelNum) {
        return this.device.channelNum / 2;
      }
    },
    selectChannelFun(index, type) {
      //切换通道
      this.currentChannel = 0;
      if (type === "left") {
        this.currentChannel = index * 2;
      } else {
        this.currentChannel = index * 2 + 1;
      }
      this.status = this.tableData[this.currentChannel]?.job?.status;
    },
    handleStatusChange() {
      let row = this.tableData[this.currentChannel];
      let text =
        row.job.status === "0"
          ? "停用"
          : "启用";
      let status = row.job.status == "0" ? "1" : "0";
      this.$modal
        .confirm("确定要 " + text + " 周期测试吗？")
        .then(function () {
          return changeJobStatus(row.jobId, status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
          this.configDraFun();
        })
        .catch(function () {
          row.job.status = row.job.status === "0" ? "1" : "0";
        });
    },
    configDraFun(type) {
      //设置周期  点击确定
      if (this.device.deviceNo) {
        listByDevice(this.device.deviceNo).then((res) => {
          this.tableData = res.data;
          if (type === "mounted") {
            this.status = this.tableData[this.currentChannel]?.job?.status;
          }
          // else {
          //   this.equiByCabinetId();
          // }
          this.selectChannelFun(0, "left");
        });
      } else {
        this.$modal.msgWarning("请先选择设备");
      }
    },
    dispatchFun(e) {
      this.ediExpressionObj = this.tableData[this.currentChannel];
      this.ediExpressionObj.cronExpression = this.tableData[this.currentChannel].job.cronExpression
      this.dispatchVis = true;
    },
    alarmCycleFun(e) {
      //点击报警阈值按钮
      this.cycleVis = true;
      this.cycleObj = {
        deviceNo: this.device.deviceNo,
        channel: this.currentChannel+1,
      };
    },
    // 点名测试是否可以点击
    isToTest() {
      if (this.isOnLine) {
        if(this.tableData.length < 1){
          return false;
        }
      } else {
        return true;
      }
    },
    goEquiRack() {
      //跳转到设备曲线页面
      this.$router.push(
        "/rollCallTest?deviceId=" +
        this.device.deviceId +
        "&deviceNo=" +
        this.device.deviceNo +
        "&channel=" +
        (this.currentChannel + 1)
      );
    },
    cancelCrossBox() {
      //取消周期设置弹框
      this.dispatchVis = false;
    },
    cancelCycleVis() {
      //取消报警阙值弹框
      this.cycleVis = false;
    },
  }
};
</script>


<style scoped lang="scss">
.container_equiList {
  width: 100%;
  padding: 20px;
  height: calc(100vh - 85px);
  box-sizing: border-box;
  background: #0d2234;

  ::v-deep.el-select {
    width: 100%;
  }
}

.container_top {
  width: 100%;
  height: 40px;
  border-bottom: 2px solid #ccc;

  .title_name_con {
    font-size: 21px;
    color: #409eff;
    font-weight: 600;
  }
}

.flex_con {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 10px;
}

.top_con {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.popover_button_con {
  width: 100%;
  padding: 10px;
  display: flex;
  color: #409eff;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

.reference_con {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1px 10px;
  cursor: pointer;

  .reference_title {
    display: none;
  }

  .select_title {
    background: #409eff;
    color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .select_ccc_title {
    background: #ccc;
    color: #409eff;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.rack_show_con {
  width: 100%;
  height: calc(100% - 50px);
  margin-top: 15px;
  box-sizing: border-box;
  border: 1px solid #999;
  position: relative;

  .rack_main {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;

    .rack_show_item {
      width: 100%;
      // border-bottom: 1px dashed #999;
      height: calc(100% / 42);
    }
  }
}

.ruler_left {
  height: 100%;
  width: 10px;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.ruler_right {
  height: 100%;
  width: 10px;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.tick {
  height: 1px;
  width: 10px;
  background-color: #ddd;
}

.right_con {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .right_top_con {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    .button_con {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .right_image_con {
    width: 100%;
    height: 80px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      height: 100%;
      width: 100%;
    }

    .left_side {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 5px 0;
      justify-content: space-between;

      .circle_con {
        width: 40px;
        height: 16px;
        border-radius: 7px;
        border: 1px solid #000;
        background: #eee;
      }
    }

    .equi_con {
      width: 100%;
      height: 100%;
      background: #3f3f3f;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-radius: 5px;
      padding-right: 40px;

      .left_1 {
        width: 100px;
        font-size: 18px;
        color: #fff;
        font-weight: 600;
        letter-spacing: 1.5px;
        font-style: italic;
      }

      .left_2 {
        display: flex;
        align-items: flex-end;

        .circle_border_con {
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;

          .circle_item_con {
            width: 16px;
            height: 16px;
            border-radius: 8px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;

            .circle_center_con {
              width: 5px;
              height: 5px;
              border-radius: 2.5px;
              background-color: #000;
            }
          }
        }

        .left_img_con {
          padding: 0 5px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .img_one {
            width: 30px;
            height: 12px;
          }

          .img_two {
            width: 52px;
            height: 40px;
          }

          .img_three {
            width: 18px;
            height: 40px;
          }

          .left_2_title {
            color: #fff;
            font-size: 12px;
            padding-top: 5px;
          }
        }
      }

      .left_3 {
        display: flex;
        height: 70px;
        justify-content: space-between;

        .three_left_con {
          display: flex;
          justify-content: space-between;

          .three_left_left {
            width: 50px;
            height: 55px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 3px 2px 1px 0;

            .three_left_left_item {
              font-size: 12px;
              line-height: 13px;
              height: 13px;
            }
          }

          .three_left_right {
            .three_one {
              height: 55px;
              width: 18px;
            }
          }
        }

        .three_center_con {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-left: 15px;

          .three_center_top {
            height: 30px;

            .three_center_img_top {
              width: 30px;
              height: 30px;
            }
          }

          .three_center_bottom {
            .three_center_img_bottom {
              width: 90px;
              height: 15px;
            }
          }
        }

        .three_right_con {
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .fourgPng_img {
            width: 15px;
            height: 15px;
            margin-bottom: 2px;
          }
        }
      }

      .left_4 {
        display: flex;
        width: 190px;
        justify-content: space-between;
        flex-wrap: wrap;

        .channel_con {
          .channel_bg_con {
            height: 28px;
            width: 40px;
            display: flex;
            align-items: center;

            .channel_img_con {
              width: 20px;
              height: 28px;
              cursor: pointer;
              background-image: url("~@/assets/images/device/connectPortPngItem.png");
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center center;
            }

            .img_shade_con {
              height: 100%;
              width: 100%;
              background: rgba(230, 230, 230, 0.5);
            }
          }

          .channel_num_con {
            color: #fff;
            display: flex;
            justify-content: space-between;
            width: 40px;
            align-items: center;
            font-size: 9px;
            margin-top: 3px;
          }
        }
      }
    }
  }

  .three_center_text_bottom {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 13px;
  }

  .right_main_con {
    width: 100%;
    height: 30%;
    margin-top: 10px;
  }
}

.main_right_table {
  height: calc(58% - 20px);
  width: 100%;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-top: 15px;
  padding: 10px;
  color: #fff;

  .right_table_top {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding-bottom: 10px;
  }
}

.table_top_item {
  display: flex;
  align-items: center;
}

.margin_right {
  padding-right: 15px;
  display: flex;
  align-items: center;

  .ceshi_con {
    color: #fff;
    padding-right: 10px;
    font-size: 14px;
  }
}

.table_top_title {
  color: #409eff;
  padding-left: 10px;
}

.right_table_middle {
  width: 100%;
  height: 25%;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.table_middle_top_bottom {
  width: 100%;
  display: flex;
  align-content: center;
  height: 50%;
  border-bottom: 1px solid #ccc;

  .table_item_con {
    width: 33%;
    display: flex;
    align-content: center;
    height: 100%;

    .table_item_title {
      background: rgba(230, 230, 230, 0.3);
      border-right: 1px solid #ccc;
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
    }

    .table_item_text {
      height: 100%;
      display: flex;
      align-content: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 60%;
    }
  }
}

.border_top_table {
  border-bottom: none;
  border-top: 1px solid #ccc;
}

.height_10 {
  height: 15%;
  display: flex;
  align-items: center;
}

.height_25 {
  height: 21%;
}

.right_table_bottom {
  width: 100%;
  height: calc(65% - 20px);
  border: 1px solid #ccc;
  margin-top: 15px;
  border-radius: 3px;
}

.right_main_con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;

  .menu_con {
    width: 200px;
    height: 100%;
  }

  .main_right_content {
    width: calc(100%);
    border-left: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .item_main_right {
      width: 50%;
      display: flex;
      color: #fff;
      height: 25%;
      align-items: center;

      .main_item_left {
        width: 150px;
        text-align: end;
      }

      .main_item_right {
        width: calc(100% - 150px);
        padding-left: 10px;
      }
    }
  }
}

.drawer_main_con {
  width: 100%;
  height: 100%;
  padding: 20px;
}

::v-deep {
  .el-input-number .el-input__inner {
    text-align: left;
  }
}

.left_right_con {
  height: 70px;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #4a4a4a;
  border-radius: 5px;
}
</style>
